<template>
    <el-drawer title="物流信息" v-model="dialogVisible" size="40%">
        <el-card shadow="never" style="border: 0; margin-bottom: 10px;">
            <div style="display: flex; align-items: center;">
                <el-image :src="info.logo" fit="fill" :lazy="true"
                    style="width: 60px;height: 60px;border-radius: 5px; border: 1px solid #333;"></el-image>
                <div class="ml-3">
                    <p>物流公司：{{ info.typename }}</p>
                    <p>物流单号：{{ info.number }}</p>
                </div>
            </div>
        </el-card>
        <el-card shadow="never" tyle="border: 0;">
            <el-timeline style="margin-left: -40px;">
                <el-timeline-item :timestamp="item.time" placement="top" v-for="(item, index) in info.list" :key="index">
                    {{ item.status }}
                </el-timeline-item>
            </el-timeline>
        </el-card>
    </el-drawer>
</template>
<script setup>
import { ref } from "vue"
import {
    getShipInfo
} from "@/api/order.js"
import { elNotification } from "@/hooks/elNotification";
const dialogVisible = ref(false)
const info = ref({})
const open = (id) => {
    return getShipInfo(id).then(res => {
        if (res.status != 0) {
            return elNotification(res.msg, "error")
        }
        info.value = res.result
        console.log(res.result)
        dialogVisible.value = true
    })
}

defineExpose({
    open
})

</script>